
import { useEffect } from 'react';
import { useNavigate } from 'react-router'

import { Image, Typography, Input, Button } from 'antd';
import { UserOutlined, SafetyCertificateOutlined } from '@ant-design/icons';

import { jumpTo } from '../../utils/jump'

import logo from '../../res/push_log.png'
import styles from './index.module.css'

//登陆页面
function Login() {
    //排版
    const { Text } = Typography;
    //导航
    const navigate = useNavigate()
    // []空数组相当于componentDidMount
    useEffect(() => {
        // 初始化地图
        const center = new window.TMap.LatLng(24.1851, 113.4052);
        const map = new window.TMap.Map("container", {
            zoom: 14, // 设置地图缩放级别
            center: center // 设置地图中心点坐标 
        });
        map.setCursorStyle("move");//鼠标样式图标
        map.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.ZOOM);//移除缩放控件
        map.setViewMode('3D');
        map.setPitch(50);
        map.easeTo({ zoom: 14, rotation: 90 }, { duration: 3000 });//平滑缩放,旋转到指定级别
        map.on("tilesloaded", function () {
            //地图加载完成

        })
        return () => {
            map.destroy();
        }
    }, []);

    function clickLogin() {
        jumpTo(navigate, '/main/pushCase', true, null)
    }

    return (
        <div className={styles.outer}>
            <div className={styles.container} id="container">
            </div>
            <div className={styles.login_box}>
                <div className={styles.title_box}>
                    <Image preview={false} width={20} src={logo} />
                    <Text className={styles.title_str} strong>推送管理系统</Text>
                </div>
                <div className={styles.user_name_box}>
                    <Input className={styles.user_name} maxLength='10' placeholder='请输入用户账号...' allowClear={true} prefix={<UserOutlined />} size="large" />
                </div>
                <div className={styles.user_pwd_box}>
                    <Input className={styles.user_pwd} maxLength='10' placeholder='请输入用户密码...' allowClear={true} prefix={<SafetyCertificateOutlined />} size="large" />
                </div>
                <Button onClick={clickLogin} className={styles.login_button} type="primary" size={'large'}>登录</Button>
            </div>
        </div>
    )
}

export default Login;